<script>
// 万物皆模块，图片要通过模块化的方式进行使用
import zfb from '../assets/zfb.png'
// 导入图标组件
import { Fold, Expand } from '@element-plus/icons-vue'

// @ 代表的是 src 路径的别名
import AsideCom from '@/components/AsideCom.vue'


export default {
  name: 'home',
  data() {
    return {
      zfb,
      // 该属性是用来定义是否展开侧边栏
      collapse: false
    }
  },
  methods: {
    logout() {
      // 退出登录的方法
      this.$store.commit('updateUserInfo', {})

      // 进入到登录页面
      this.$router.push('/login')

    }
  },
  mounted() {

  },
  computed: {
    headerLeft() {
      return this.collapse ? 'Expand' : 'Fold'
    },
    asideWidth() {
      return this.collapse ? '64px' : '200px'
    }
  },
  components: {
    AsideCom,
    Fold,
    Expand
  }
}

</script>

<template>
  <div class="common-layout">
    <el-container>

      <!-- 侧边栏 -->
      <el-aside class="logo-box" :width="asideWidth">
        <div class="logo-box">
          <el-image style="width: 32px; height: 32px" :src="zfb" />
          <h2 class="title" v-show="!collapse">锋购后台管理系统</h2>
        </div>

        <!-- 属性传值将是否展开传递给子组件 -->
        <AsideCom :collapse="collapse" />
      </el-aside>



      <el-container>

        <!-- 头部 -->
        <el-header>
          <el-icon @click="collapse = !collapse" size="30">
            <component :is="headerLeft"></component>
          </el-icon>

          <div>
            <span v-if="$store.state.userInfo.token">
              欢迎 {{ $store.state.userInfo.adminname }}
              <el-button @click="logout">退出登录</el-button>
            </span>
            <el-button v-else @click="$router.push('/login')">请登录</el-button>
          </div>

        </el-header>

        <!-- 内容 -->
        <el-main>
          <!-- 在这里配置二级路由的出口 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<!-- 
  lang="scss" 设置样式使用 sass 
  scoped 用来规定当前样式只在当前组件中可以生效
 -->
<style scoped lang="scss">
.el-container {
  background-color: aliceblue;

  .el-aside {
    background-color: rgb(238, 245, 206);
    color: white;

    .logo-box {
      height: 60px;
      display: flex;
      align-items: center;

      .el-image {
        margin: 0 12px;
      }

      .title {
        font-size: 16px;
        color: black;
      }
    }
  }

  .el-header {
    background-color: rgb(152, 236, 152);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>